<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">食品类别</small>
      </a>
      <a class="operation" v-on:click="show = !show" v-show="operation">
        <i class="el-icon-setting"></i> 操作
      </a>
      <a href="javascript:;" class="save" v-show="save">
        <button @click="submitForm()" type="primary">保存</button>
      </a>
      <!--dialog-->
      <transition name="fade">
        <div class="operatbox" v-show="show">
          <a @click="update()">修改</a>
          <a @click="handleDelete()">删除</a>
        </div>
      </transition>
    </header>
  
    <main>
      <div class="formcontent">
        <ul>
          <li>
            <span><em>*</em>序号</span>
            <div class="froms">
              <input v-model="listData.sort" :disabled="forbidden" name="sort" v-validate="'required|numeric'" :class="{'is-danger': errors.has('sort')}">
            </div>
          </li>
  
          <li>
            <span><em></em>名称</span>
            <div class="froms">
              <input v-model="listData.name" :disabled="forbidden">
            </div>
          </li>
        </ul>
      </div>
    </main>
  </div>
</template>

<script>
  import {
    DemandTypeDelete
  } from '../../../api/api';
  import {
    DemandTypeDetail,
    DemandTypeUpdate
  } from '../../../api/api';
  export default {
    data() {
      return {
        listData: {},
        show: false, //默认隐藏
        operation: true,
        save: false,
        forbidden: true
      };
    },
    verify: {
      listData: {
        sort: "required",
      },
    },
    methods: {
      update: function() {
        this.operation = false,
          this.save = true,
          this.show = false
        this.forbidden = false
      },
      //数据加载方法
      getData() {
        //定义需要传给通讯的参数： unid    
        let options = {
          params: {
            id: this.$route.query.unid,
          }
        }
  
        //调取接口
        DemandTypeDetail(options).then((res) => {
          if (res.success === true) {
            this.listData = res.data;
            // console.log(res.data)
          }
        })
      },
      //删除方法
      handleDelete() {
        let deletParams = {
          params: {
            unids: this.$route.query.unid,
          }
        }
        this.$confirm('是否删除此条信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          DemandTypeDelete(deletParams).then(() => {
            this.getData();
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.$router.go(-1);
          });
        });
      },
      //修改方法
      submitForm: function() {
        this.$validator.validateAll().then((result) => {
          if (result) {
            let data = {
              Sort: this.listData.sort,
              Name: this.listData.name,
              Unid: this.$route.query.unid,
            }
            let dataoption = {
              params: {
                Data: JSON.stringify(data),
                UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
              }
            }
            //调取接口
            DemandTypeUpdate(dataoption).then((res) => {
              if (res.success === true) {
                this.$message.success('保存成功');
                this.$router.go(-1);
              } else {
                this.$message.error(res.msg);
              }
            }).catch(function() {
              this.$message.error('网络异常。');
            })
  
          } else {
            this.$message.error('带*号为必填项，请确认填写格式正确');
          }
        })
  
  
      }
  
  
    },
    created() {
      this.getData();
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  em {
    width: 5px;
    display: -webkit-inline-box;
  }
</style>
